<template>
  <div class="login-bg">
      <div class="login-contain">
        <div class="login-header">
          <img src="../assets/logo1.png" class="loginimg"/>
          <p>宝爸宝妈</p>
          <p class="p1">注册</p>
        </div>
        <div class="form-group">
          <div class="form-item">
            <label for="username">
              <img src="../assets/yonghu.png" class="userimg">
            </label>
            <input id="uname" @blur="name" type="text" placeholder="请输入用户名" class="userinput" v-model="uname">
            <div class="user-reg" id="unamereg">{{nametest}}</div>
          </div>
          <div class="form-item">
            <label for="password">
              <img src="../assets/user.png" class="userimg">
            </label>
            <input id="phone" @blur="hone" type="password" placeholder="请输入手机号" class="userinput" v-model="phone">
             <div class="user-reg" id="phonereg">{{phonetest}}</div>
          </div>
          <div class="form-item">
            <label for="password">
              <img src="../assets/password.png" class="userimg">
            </label>
            <input id="upwd" @blur="pwd" type="password" placeholder="请输入密码" class="userinput" v-model="upwd">
           <div class="user-reg" id="upwdreg">{{pwdtest}}</div>
          </div>
          <div class="form-item">
            <label for="password">
              <img src="../assets/password.png" class="userimg">
            </label>
            <input id="cpwd" @blur="ppwd" type="password" placeholder="请再次输入密码" class="userinput" v-model="cpwd">
             <div class="user-reg" id="cpwdreg">{{cpwdtest}}</div>
          </div>
          <div class="button-group">
            <button class="login-btn" @click="reg">提交注册</button>
          </div>
          <!-- 注册账号及忘记密码 -->
          <div class="yhxy">
            <input type="checkbox" class="y-box" checked="checked">
            <span class="yhxy1">《宝妈宝爸用户注册协议》</span>
          </div>
          <div class="fhan">
            <img @click="fhann" src="../assets/fhan.png"/>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      uname:"",
      nametest:"4-16位字母、数字或下划线组合",
      upwd:"",
      pwdtest:"6-12位字母、数字组合",
      cpwd:"",
      cpwdtest:"两次密码需一致",
      phone:"",
      phonetest:"请输入11位有效手机号"
    }
  },
  props:[],
  methods:{
    //失去焦点 自动验证
    name(){
      var uname_reg=/^[a-z0-9]{4,16}$/;
      if(!uname_reg.test(this.uname)&&this.uname!=""){
        $("#unamereg").css("color","red");
        $(".login-btn").prop("disabled",true);
        return;
      }else{
        $("#unamereg").css("color","#666666");
        $(".login-btn").prop("disabled",false);
      }
    },
    pwd(){
      var upwd_reg=/^[a-z0-9]{6,12}$/;
      if(!upwd_reg.test(this.upwd)){
        $("#upwdreg").css("color","red");
        $(".login-btn").prop("disabled",true);
        return;
      }else{
        $("#upwdreg").css("color","#666666");
        $(".login-btn").prop("disabled",false);
      };
    },
    ppwd(){
      if(this.upwd!=this.cpwd){
          $("#cpwdreg").css("color","red");
          $(".login-btn").prop("disabled",true);
          return;
      }else{
          $("#cpwdreg").css("color","#666666");
          $(".login-btn").prop("disabled",false);
      };
    },
    hone(){
      var phone_reg=/^1[3-9]\d{9}$/;
      if(!phone_reg.test(this.phone)){
          $("#phonereg").css("color","red");
          $(".login-btn").prop("disabled",true);
          return ;
      }else{
          $("#phonereg").css("color","#666666");
          $(".login-btn").prop("disabled",false);
      };
  },
  reg(){
        console.log(0);
      if((this.uname!="")&&(this.upwd!="")&&(this.cpwd!="")&&(this.phone!="")){
          var url="reg";
          var obj={uname:this.uname,upwd:this.upwd,phone:this.phone};
          this.axios.get(url,{params:obj}).then(res=>{
              // 验证用户名是否可用
              if(res.data.code==1){
                  $("#unamereg").html("此用户名已被注册");
                  $("#unamereg").css("color","red");
              }else if(res.data.code==200){
                  alert("注册成功")
                  this.$router.push("/index")
              }
          })
      }
  },
   fhann(){
     this.$router.push("/login");
   }
  },
}
</script>

<style scoped>
a{
  text-decoration:none;
  color:black;
  list-style:none;
}
div,input,button,p,a{
  margin:0;
  padding:0;
}
.login-bg{
  width: 375px;
  height: 667px;
  background:url(../assets/login_bg.jpg)no-repeat fixed;
  color: #ffffff;
  background-size:100% 100%;
}
.login-contain{
  position:absolute;
  left:30px;
  top:25px;
  width:85%;
}
.login-header{
  padding:5%;
}
.loginimg{
    width:80px;
    height:80px;
}
.login-header p{
  font-size: 15px;
  color:#0a0a0a;
  font-weight:bold;
  text-align:center;
  letter-spacing:2px;
  text-shadow:0.1em 0.15em 0.1em #e0efec;
  margin-top:10px;
}
.form-group{
  padding:5%;
}
.form-item{
  margin-top:0%;
  padding:0 10px;
}
.userinput{
  outline:none;
  border:0;
  background-color:rgba(0,0,0,0);
  color:#6d6868;
  height:40px;
  font-size:15px;
  width:60%;
  margin-left:-23%;
}
.userimg{
  width:25px;
  position:absolute;
  margin-top:8px;
  left:5px;
}
.button-group{
  padding:5%;
}
.button-group .login-btn{
  background-color:#fc6d8b;
  color:#ffffff;
  outline:none;
  border:0;
  width:115%;
  height:50px;
  margin-top:3%;
  border-radius:5px;
  margin-left:-6%;
  font-size:15px;
}
.yhxy{
    margin-left:0px;
    margin-right:0px;
}
.y-box{
  cursor: pointer;
  width:15px;
  height:15px;
  border:1px solid #dddddd;
  background:transparent;
  border-color:#fc6d8b;
  float: left;
}
.yhxy1{
    float: left;
    color:#fc6d8b;
    font-size:13px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
			color:#6d6868;
		}
.fhan{
  margin: 43px 0 0 0;
}
.login-header .p1{
  font-size: 25px;
  color:#fc6d8b;
  font-weight:bold;
  text-align:center;
  letter-spacing:2px;
  text-shadow:0.1em 0.15em 0.1em #f1b2bf;
  margin-top:10px;
}
.user-reg{
  color: #fc6d8b;
  font-size:10px;
  margin-right:44px;
}
</style>